<template>
  <div class="provincialmap">
    <MyHead title="湖北高校防艾活动" style="background: #f8f8f8"></MyHead>
    <div class="box" :style="{ backgroundImage: `url(${back_image})` }">
      <div v-if="have_map == 1">
        <div class="title-box" v-if="theme_image">
          <img :src="this.sourceURL + theme_image" alt="" width="100%" height="100%" />
        </div>
        <div class="map-box" v-if="flag">
          <umap
            :mapdata="mapdata"
            type="1"
            :colors="colors"
            style="width: 100%"
          ></umap>
        </div>
      </div>

      <div v-else>
        <div class="title-box" v-if="theme_image">
          <img :src="this.sourceURL + theme_image" alt="" width="100%" height="100%" />
        </div>
      </div>
      <div class="goindex">
        <van-button
          round
          type="info"
          color="#E21B1B"
          @click="goSignIn"
          v-if="this.have_sign_in == 1"
          >立即签到</van-button
        >
        <van-button round type="info" color="#E21B1B" @click="goJoin" v-else
          >立即参与</van-button
        >
      </div>
    </div>
    <div class="bottom-box">
      <div>湖北省疾控中心-湖北省艾防协会</div>
    </div>
  </div>
</template>

<script>
import umap from "./umap";
import _ from "lodash";
export default {
  components: {
    umap,
  },
  data() {
    return {
      mdata: [],
      mapdata: [],
      theme_image: "", //主题图
      back_image: "",
      openid: $.cookie("openid"), //取值，
      q: "", //活动codeId，
      have_map: "", //是否显示地图
      surveyInfo: {}, //活动基础信息
      have_sign_in: "", //是否签到
      have_prize: "", //是否抽奖:0=否,1=是
      need_medal_num: "", //勋章要求(枚)
      have_medal: "", //赠送勋章:0=否,1=是(注意，抽奖页面会用到，先领勋章接口，在领奖品)
      act_type: "", //活动形式：0=无,1=问卷,2=答题（需比较正确答案）
      flag: false,
      colors: [],
    };
  },
  methods: {
    async getPercentData(mdata) {
      let res = await this.$ajax.arearank({
        openid: this.openid,
        depart_code: 420000,
      });
      // 分析排名
      if (res.code == 1) {
        var sortdesc = function (a, b) {
          return b["percentage"] - a["percentage"];
        };
        var colors = [
          "#a21313",
          "#b71c1c",
          "#be2222",
          "#c62828",
          "#cb2929",
          "#d32f2f",
          "#dd312d",
          "#f44336",
          "#eb4643",
          "#ef5350",
          "#e75c5c",
          "#ef5350",
          "#e57373",
          "#e68383",
          "#ef9a9a",
          "ffcdd2",
          "#ffebee",
        ];

        var list = res.data.act_data.area_rate_info;
        // list.push({
        //   act_num:77,
        //   id:259,
        //   percentage:'0%',
        //   pid:7,
        //   type:2,
        //   name:'神农架林区市疾控中心',
        //   depart_code:"429021"
        // })
        // list  = list.map((item)=>{
        //   if(item.name=='天门市疾控中心'){
        //     item.depart_code = '429006'
        //   }
        //   if(item.name=='仙桃市疾控中心'){
        //     item.depart_code = '429004'
        //   }
        //   if(item.name=='潜江市疾控中心'){
        //     item.depart_code = '429005'
        //   }
        //   return { ... item }
        // })
        // console.log(_.cloneDeep(list).sort((a,b)=>{
        //   return b['id'] - a['id']
        // }))

        // console.log(_.orderBy(_.cloneDeep(list),['id'],['asc']))
        mdata.forEach((item, i) => {
          list.forEach((v, j) => {
            if (item.properties.adcode == v.depart_code) {
              // item.percentage = parseFloat(v.percentage )
              this.colors[i] = colors[j];
              return;
            }
          });
        });
        // _.forEach(list,(item)=>{
        //    _.forEach(mdata,(v)=>{
        //     if(v.properties.adcode==item.depart_code){
        //         item.type = v.type;
        //         item.properties = _.cloneDeep(v.properties)
        //         item.geometry = _.cloneDeep(v.geometry)
        //         return ;
        //     }
        //    })
        // })

        // for(let i=0;i<mdata.length;i++){
        //   // mdata[i].percentage = parseFloat(list[i].percentage)
        //   var item = this.mapdata[i]
        //   item.percentage = parseFloat(list[i].percentage);
        //   this.$set(this.mapdata,i,_.cloneDeep(item))
        // }
        // list.forEach((item)=>{
        //   console.log(item.percentage + '-----' + item.properties.name + '0---------'+item.properties.adcode)
        // })
        this.flag = true;
        // this.mapdata = _.cloneDeep(mdata).sort(sortdesc)
        this.$nextTick(() => {
          this.mapdata = _.cloneDeep([...mdata]);
          // this.mapdata = _.orderBy(_.cloneDeep(this.mapdata),['percentage'],['desc'])
          // this.mapdata.forEach((item)=>{
          //   console.log(item.geometry)
          //   console.log(item.percentage + '-----' + item.properties.name+  '---------'+item.properties.adcode)
          // })
          this.$forceUpdate();
        });
      }
    },
    /*湖北数据*/
    async getHubeiData() {
      this.flag = false;
      let res = await this.$ajax.getarealist({
        openid: this.openid,
        depart_code: 420000,
      });
      if (res.code == 1) {
        this.getPercentData(res.data.features);
      }
    },
    /*获取活动基础信息*/
    async actSurveyInfo() {
      let res = await this.$ajax.getActSurveyInfos({
        q: this.q,
        openid: this.openid,
      });
      if (res.code == 1) {
        this.back_image = this.sourceURL + res.data.back_image; //背景图
        this.theme_image =  res.data.theme_image; //主题图
        this.have_map = res.data.have_map; //是否显示地图（0：否 1：显示）
        this.have_sign_in = res.data.have_sign_in; // 签到
        this.have_prize = res.data.have_prize; //抽奖
        this.need_medal_num = res.data.need_medal_num; //勋章要求(枚)
        this.have_medal = res.data.have_medal; //赠送勋章
        this.act_type = res.data.act_type; //活动形式
        this.surveyInfo = res.data; //活动基础信息
        this.getHubeiData();
      }else{  
        this.$toast.fail(res.msg);
        // this.$notify({  color: '#ad0000', message: res.msg, duration:1500 })
        setTimeout(()=>{
          this.$router.push({name:"activityList"})
        },2000)
      }
    },

    /*立即参与*/
    async goJoin() {
      this.getUserType(1);
      this.getUserType(1);
      let res = await this.$ajax.getPersoninfo({
        openid: this.openid,
      });
      if (res.code == 1) {
        this.changeUserInfo(res.data);
        this.$router.push({
          name: "schoolProblemPage",
          query: {
            q: this.q,
            have_prize: this.have_prize,
            act_type: this.act_type,
          },
        });
      }else{
         //  没有用户身份
         this.changeRegShow(true)
      }
    },
    /*立即签到*/
    async goSignIn() {
      let res = await this.$ajax.getPersoninfo({
        openid: this.openid,
      });
      if (res.code == 1) {
        this.changeUserInfo(res.data);
        let res2 = await this.$ajax.getActSignIn({
          q: this.q,
          openid: this.openid,
          type: "do",
        })
        if (res2.code == 1) {
          this.$toast.success(res.msg);
          setTimeout(() => {
            this.actSurveyInfo();
            setTimeout(() => {
              this.$router.push({
                name: "schoolProblemPage",
                query: {
                  q: this.q,
                  have_prize: this.have_prize, //抽奖
                  act_type: this.act_type, //活动形式
                  have_medal: this.have_medal, //是否赠送勋章
                },
              });
            }, 100);
          }, 1000);
        } else {
          this.$toast.fail(res2.msg);
        } 
      }else{
         // 没有用户身份
         this.changeRegShow(true)
      }
    },

    /*用户的勋章数（如活动的参加需要勋章数目）*/
    async getMedealList() {
      let res = await this.$ajax.medealList({});
    },
    /*获取用户信息*/ 
     /*获取用户信息*/
     async getUserInfo() {
      let res = await this.$ajax.getPersoninfo({
        openid: this.openid,
      });
      if (res.code == 1) {
        this.changeUserInfo(res.data);
      }
    },
  },
  mounted() {
    this.q = this.$route.query.q;
    // this.getUserInfo();
    this.actSurveyInfo();

  },
};
</script>

<style lang="scss" scoped>
.bottom-box {
  color: rgba(16, 16, 16, 1);
  font-size: 12px;
  text-align: center;
  font-family: SourceHanSansSC-regular;
  position: fixed;
  bottom: 6px;
  left: 0;
  width: 100%;
  font-weight: bold;
}

.provincialmap {
  width: 100%;
  min-height: 100vh;
  position: absolute;
  box-sizing: border-box;
  .box {
    width: 100%;
    min-height: calc(100vh - 50px);
    background-size: 100% 100%;
    padding-bottom: 40px;
    box-sizing: border-box;
    .title-box {
      width: 100vw;
    }
    .map-box {
      margin-top: 45px;
      padding: 0 10px;
      width: 100%;
      box-sizing: border-box;
    }
    .goindex {
      font-size: 12px;
      text-align: center;
      margin-top: 40px;
    }
  }
}
</style>